<template>
  <div class="page page__vipboard">
    <div class="page__content">
      <div class="scroll">
        <!-- 顶部banner -->
        <div class="banner">
          <el-carousel
            :autoplay="true"
            @change="carouselchange"
            :arrow="'never'"
          >
            <el-carousel-item
              v-for="(item, index) in bannerList"
              :key="index"
            >
              <img
                v-if="item.MANAGER_ADPHOTO"
                :src="utilBannerImgUrl(item)"
                @click="showPackageInfo"
                class="pointer"
                alt=""
              >
              <img
                v-else
                src="./assets/img/default.png"
                alt=""
              >
            </el-carousel-item>
          </el-carousel>
          <el-button

            @click="downloadnow($event)"
            type="primary"
            size="small"
            class="bannerbtn downloadbtn"
          >
            立即下载
          </el-button>
          <!-- v-if="packageInfo.MANAGER_FUNUP" -->
          <el-button

            @click="historydownload($event)"
            size="small"
            class="bannerbtn"
          >
            历史升级
          </el-button>
        </div>
        <div class="section clearBoth">
          <!-- 最新插件 -->
          <div class="card left">
            <div class="card_title clearBoth">
              <p class="left">
                最新插件
              </p>
              <span
                @click="handlePluginMore"
                class="right pointer "
                style="color: rgb(0, 11, 255);"
              >
                更多
              </span>
            </div>
            <lastplugin :list="lastPluginDataList" />
          </div>
          <!-- 最新消息 -->
          <div class="card right">
            <div class="card_title clearBoth">
              <p class="left">
                最新消息
              </p>
              <i
                @click="fullScreen = true"
                class="right pointer jeicon jeicon-max"
              />
            </div>
            <newslist
              :list="nlist"
              :homenlist="homenlist"
              :full-screen="fullScreen"
              :params="newsParams"
              @searchNews="getNewsList"
              @hiddendialog="hiddendialog"
              @detailFullScreen="showDetail"
            />
          </div>
        </div>
        <div class="section clearBoth">
          <!-- 项目过程统计 -->
          <div class="card left">
            <div class="card_title clearBoth">
              <p class="left">
                项目过程统计
              </p>
              <div class="right">
                <span style="margin-right: 10px;">{{ activeType.text }}</span>
                <el-dropdown
                  @command="typeSelect"
                  trigger="click"
                >
                  <span style="cursor: pointer;color: rgb(0, 11, 255);">切换</span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(item, index) in typeList"
                      :key="index"
                      :command="item.code"
                      :style="activeType.code == item.code ? {color: 'rgb(0, 11, 255)', 'font-weight': 700} : ''"
                    >
                      {{ item.text }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <statistics :data="taskCount" />
          </div>
          <!-- 快捷入口 -->
          <div class="card right">
            <div class="card_title clearBoth">
              <p class="left">
                快捷入口
              </p>
            </div>
            <entry />
          </div>
        </div>
        <div class="section">
          <!-- 指派给我的任务 -->
          <div class="card fullcard">
            <div class="card_title clearBoth">
              <p class="left">
                指派给我的任务
              </p>
              <p
                @click="openFuncByCode()"
                class="right pointer"
                style="color: rgb(0, 11, 255)"
              >
                更多
              </p>
            </div>
            <mytask :list="taskList" />
          </div>
        </div>
      </div>
      <!-- 下载平台升级包 -->
      <el-dialog
        :modal-append-to-body="false"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :show-close="false"
        top="30vh"
        class="vipdialog"
      >
        <img
          src="./assets/img/titlebg.png"
          alt=""
        >
        <div class="title clearBoth">
          <p class="left">
            下载平台升级包
          </p>
          <i
            @click="closeDialog"
            class="jeicon jeicon-error right pointer"
          />
        </div>
        <div
          v-if="downstep === 'loading'"
          class="loading_box"
        >
          <img
            src="./assets/img/loading.png"
            alt=""
          >
          <p>您专属的JEPaaS云平台升级包, 正在生成中, 请耐心等待!</p>
        </div>
        <div
          v-else
          class="download_box"
        >
          <p class="text">
            您专属的JEPaaS云平台升级包, 已生成成功, 请您下载!
          </p>
          <p style="color: #666666;">
            请点击下载平台升级包
            <span
              v-if="downloadList && downloadList.length > 1"
              @click="downloadImg($event, downloadList[downloadList.length-1])"
              class="downloadall"
            >全部下载</span>
          </p>
          <div class="list_wrp clearBoth">
            <div
              v-for="(item, index) in downloadList"
              v-if="index < downloadList.length - 1"
              :key="index"
              @click="downloadImg($event, item)"
              v-html="getImgIcon(item)"
              class="pointer items left"
            />
          </div>
        </div>
        <button
          @click="closeDialog"
          class="closebtn"
        >
          关闭
        </button>
      </el-dialog>
    </div>
    <packagedetail
      :visible="showPackageDetail"
      :data="showPackageDetailInfo"
      @close="showPackageDetail = !showPackageDetail"
    />
  </div>
</template>

<script>
import newslist from './modules/news';
import entry from './modules/entry';
import statistics from './modules/statistics';
import mytask from './modules/mytask';
import packagedetail from './modules/packagedetail';
import lastplugin from './modules/lastplugin';
import {
  getNews,
  loadProTaskCount,
  getTask,
  getUpPackage,
  getdict,
  downLoadUpPackage,
  getInfoById,
  getPluginList,
  getAppBanner,
  appBannerDownloadNow,
} from './actions/api.js';

export default {
  name: 'Index',
  components: {
    newslist, entry, statistics, mytask, packagedetail, lastplugin,
  },
  data() {
    return {
      activeType: {},
      typeList: [],
      showDialog: false,
      showPackageDetail: false,
      showPackageDetailInfo: {},
      downstep: 'loading',
      taskList: [],
      packageInfo: {},
      bannerList: [],
      nlist: [],
      homenlist: [],
      fullScreen: false,
      detailFullScreen: false,
      newsParams: {
        tableCode: 'VIP_XWGL',
        limit: 10,
        start: 0,
        page: 1,
        total: 0,
        orderSql: 'ORDER BY SY_CREATETIME DESC',
        whereSql: ' AND XWGL_QY_CODE = "1"',
        j_query: Ext.encode({
          custom: [
            { type: '=', code: 'XWGL_QY_CODE', value: '1' },
          ],
          order: [
            { type: 'DESC', code: 'SY_CREATETIME' },
          ],
        }),
      },
      taskCount: {},
      downloadList: [], // 下载dialog显示的列表
      lastPluginDataList: [], // 最新插件列表
    };
  },
  watch: {
    fullScreen: {
      handler(nv, ov) {
        if (nv || this.detailFullScreen) {
          JE.setWestMenuVisible(false);
        } else {
          JE.setWestMenuVisible(true);
        }
      },
      immediate: true,
    },
    detailFullScreen: {
      handler(nv, ov) {
        if (nv || this.fullScreen) {
          JE.setWestMenuVisible(false);
        } else {
          JE.setWestMenuVisible(true);
        }
      },
      immediate: true,
    },
    showPackageDetail: {
      handler(nv, ov) {
        if (nv) {
          JE.setWestMenuVisible(false);
        } else {
          JE.setWestMenuVisible(true);
        }
      },
      immediate: true,
    },
    bannerList(nv) {
      if (nv && nv.length > 0) {
        this.packageInfo = this.bannerList[0];
      }
    },
  },
  created() {
    JE.setWestMenuVisible(true);
    this.load();
  },
  mounted() {},
  methods: {
    load() {
      this.getNewsList(); // 获取新闻列表
      this.getTaskList(); // 获取任务列表
      this.getBanner(); // 获取顶部菜单PC
      this.getDictList(); // 获取数据字典
      this.getLastPlugin(); // 获取最新插件
      // this.getAppBannerInfo(); // 获取顶部app下载信息
    },
    getNewsList(page) {
      if (page) {
        this.newsParams.start = page.start;
        this.newsParams.page = page.page;
      }
      getNews(Ext.clone(this.newsParams)).then((data) => {
        this.nlist = data.rows;
        this.newsParams.total = data.totalCount;
        if (this.newsParams.page === 1) {
          this.homenlist = data.rows;
        }
      });
    },
    showDetail(v) {
      this.detailFullScreen = v;
    },
    getloadProTaskCount(code) {
      loadProTaskCount({ PRODUCT_CPDH: code }).then((data) => {
        this.taskCount = data.obj;
      });
    },
    getTaskList() {
      const params = {
        tableCode: 'JE_PRO_TASK',
        limit: 7,
        start: 0,
        page: 1,
        whereSql: `and SY_PREAPPROVUSERS = '${JE.getCurrentUser().id}'`,
        orderSql: 'ORDER BY SY_CREATETIME DESC',
        j_query: Ext.encode({
          custom: [
            { type: '=', code: 'SY_PREAPPROVUSERS', value: JE.getCurrentUser().id },
          ],
          order: [
            { type: 'DESC', code: 'SY_CREATETIME' },
          ],
        }),
      };
      getTask(params).then((data) => {
        this.taskList = data.rows;
      });
    },
    getBanner() {
      const params = {
        limit: 1,
        start: 0,
      };
      getUpPackage(params).then((data) => {
        this.bannerList = data.obj;
        this.bannerList[0].type = 'pc';
        this.bannerList[1].type = 'app';
        // const obj = Object.assign({ type: 'pc' }, data.obj[0]);
        // this.bannerList.push(obj);
      });
    },
    // 整理banner图的图片格式
    utilBannerImgUrl(item) {
      if (!item.MANAGER_ADPHOTO) return;
      const url = item.MANAGER_ADPHOTO.split('*')[1];
      return JE.getFileUrl(url, '', '', '', 'VIP_PFUP_MANAGER');
    },
    setPackageInfo(item) {
      this.packageInfo = item;
    },
    showPackageInfo() {
      getInfoById({
        tableCode: this.packageInfo.type === 'pc' ? 'VIP_PFUP_MANAGER' : 'VIP_APPUP_MANAGER',
        pkValue: this.packageInfo[this.packageInfo.type === 'pc' ? 'VIP_PFUP_MANAGER_ID' : 'VIP_APPUP_MANAGER_ID'],
      }).then((data) => {
        this.showPackageDetail = !this.showPackageDetail;
        this.showPackageDetailInfo = data;
        // JE.showFunc('VIP_PFUP_MANAGER_CLIENT', {
        //   readOnly: true,
        //   type: "form",
        //   values: data,
        // });
      });
    },
    getDictList() {
      const params = {
        node: 'ROOT',
        onlyItem: true,
        excludes: 'checked',
        strData: '[{"ddCode":"JE_PRO_PRODUCT","whereSql":"","ddName":"","async":false,"orderSql":"","parentSql":"","rootId":"","nodeInfo":"","params":{},"moreRoot":false,"zwfFlag":"0"}]',
      };
      getdict(params).then((data) => {
        this.typeList = data;
        this.activeType = data[0] || {};
        //  TODO 这里逻辑需要修改 业务数据可能为空
        if (data.length > 0) {
          this.getloadProTaskCount(this.activeType.code);
        }
      });
    },
    typeSelect(code) {
      this.activeType = this.typeList.filter(item => item.code === code)[0];
      this.getloadProTaskCount(this.activeType.code);
    },
    downloadnow(e) {
      e.preventDefault();
      if (this.packageInfo.type === 'pc') {
        JE.selectWin({
          title: '请选择需升级的客户授权信息',
          configInfo: 'VIP_SERVE_COPYRIGHT_VERIFY_RELEASE,,,S',
          type: 'grid',
          okButtonClick: (item) => {
            if (item.length < 1) {
              return JE.alert('请选择需升级的客户授权信息');
            }
            this.searchPackage(item[0].data);
          },
        });
      } else {
        this.showDialog = !this.showDialog;
        appBannerDownloadNow().then((res) => {
          this.downstep = 'done';
          this.downloadList = res.obj;
        });
      }
    },
    searchPackage(item) {
      this.showDialog = !this.showDialog;
      downLoadUpPackage({
        packageInfo: JSON.stringify(this.packageInfo),
        licenseInfo: JSON.stringify(item),
      }).then((data) => {
        this.downstep = 'done';
        this.downloadList = data.obj;
      });
    },
    historydownload(e) {
      e.preventDefault();
      if (this.packageInfo.type === 'pc') {
        JE.showFunc('VIP_PFUP_MANAGER_CLIENT', {
          // whereSql: `AND MANAGER_CPCODE IN ( SELECT MANAGER_CODE FROM VIP_SALE_MANAGER WHERE MANAGER_ZHID = '${JE.getCurrentUser().zhId}')`
        });
      } else {
        JE.showFunc('VIP_APPUP_MANAGER');
      }
    },
    openFuncByCode() {
      JE.showFunc('VIP_JE_PRO_TASK');
      // JE.openFuncByCode('VIP_JE_PRO_TASK');
    },
    hiddendialog() {
      this.fullScreen = false;
    },
    getImgIcon(item) {
      let icon = '';
      let color = '';
      const type = item.filePath.substring(item.filePath.lastIndexOf('.') + 1);
      if ('doc,docx'.indexOf(type) > -1) {
        icon = 'word';
        color = '#2A5699';
      } else
      if ('xls,xlsx'.indexOf(type) > -1) {
        icon = 'excel';
        color = '#107B0F';
      } else
      if ('pdf'.indexOf(type) > -1) {
        icon = 'pdf';
        color = '#DC2E1B';
      } else
      if ('ppt'.indexOf(type) > -1) {
        icon = 'pdf';
        color = '#D24625';
      } else
      if ('zip'.indexOf(type) > -1) {
        icon = 'zip';
        color = '#D24625';
      } else
      if ('txt'.indexOf(type) > -1) {
        icon = 'txt';
        color = '#F39205';
      } else
      if ('jpg,jpeg,png,gif'.indexOf(type) > -1) {
        icon = 'image';
        color = 'rgb(255, 119, 68)';
      } else {
        icon = 'unknownfile';
        // color = 'F39205';
      }
      return `
        <i class="jeicon jeicon-${icon}" style="color: ${color}"></i>
        <p>${item.fileName}</p>
      `;
    },
    downloadImg(e, file) {
      e.stopPropagation();
      const $a = document.createElement('a');
      const path = JE.getFileUrl(file.filePath, '', '', '', 'VIP_PFUP_MANAGER');
      $a.setAttribute('href', path);
      $a.setAttribute('download', file.fileName);
      $a.click();
    },
    closeDialog() {
      this.showDialog = !this.showDialog;
      this.downloadList = [];
      this.downstep = 'loading';
    },
    getLastPlugin() {
      getPluginList().then((res) => {
        this.lastPluginDataList = res.rows;
      });
    },
    // getAppBannerInfo() {
    //   getAppBanner().then((res) => {
    //     const obj = Object.assign({ type: 'app' }, res.obj[0]);
    //     this.bannerList.push(obj);
    //   })
    // },
    // 顶部banner切换
    carouselchange(e) {
      this.packageInfo = this.bannerList[e];
    },
    // 最新插件的更多按钮
    handlePluginMore() {
      JE.showFunc('JE_PHONE_FUNC_LOG_VIP');
    },
  },
};
</script>

<style lang="scss">
  .page__vipboard {
    background-color: #f0f2f5;
    height: 100%;
    .page__content {
      width: 1200px;
      margin: 0 auto;
      height: 100%;
      position: relative;
      overflow: hidden;
      padding: 20px 0;
      .scroll {
        width: 1220px;
        padding-right: 20px;
        overflow-y: auto;
        height: 100%;
        .banner {
          width: 100%;
          height: 100px;
          position: relative;
          // border: 1px solid black;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
          .bannerbtn {
            position: absolute;
            right: 20px;
            bottom: 10px;
            z-index: 2;
            &.downloadbtn {
              right: 110px;
            }
          }
          .el-carousel__container {
            height: 100px;
          }
          .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 100%;
          }
          .el-carousel__indicator--horizontal {
            padding-left: 10px;
            padding-right: 10px;
          }
        }
        .section {
          margin-top: 20px;
        }
        .card {
          padding: 10px 15px;
          width: 590px;
          height: 380px;
          background-color: #fff;
          position: relative;
          .card_title {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            i {
              font-size: 13px;
              color: #ADADAD;
            }
          }
          &.fullcard {
            width: 1200px;
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .pointer {
    cursor: pointer;
  }
  .clearBoth {
    &:after {
      content: '';
      clear: both;
      display: table;
    }
  }
  .m30 {
    margin-top: 30px;
  }
</style>
<style lang="scss">
.vipdialog {
  z-index: 999999!important;
  .el-dialog {
    width: 600px !important;
    border-radius: 12px !important;
    .el-dialog__header {
      padding: 0 !important;
    }
    .el-dialog__body {
      padding: 0 0 20px 0 !important;
      border-radius: 12px !important;
    }
    .title {
      color: #ffffff;
      position: absolute;
      top: 15px;
      right: 15px;
      left: 15px;
      font-size: 18px;
      height: 20px;
      line-height: 20px;
      > i {
        font-size: 12px;
      }
    }
    .loading_box {
      margin-top: 20px;
      height: 160px;
      > img {
        display: block;
        margin: 0 auto;
        transform: rotate(360deg);
        animation: rotation 2s linear infinite;
      }
      > p {
        margin-top: 20px;
        font-size: 18px;
        text-align: center;
      }
    }
    .download_box {
      padding: 0 50px;
      height: 160px;
      margin-top: 20px;
      .text {
        position: absolute;
        top: 50px;
        right: 0;
        left: 0;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
      }
      .downloadall {
        margin-left: 20px;
        cursor: pointer;
        color: #386bd0;
        text-decoration: underline;
        font-size: 13px;
        &:hover {
          color: #1a4c9c;
        }
      }
      .list_wrp {
        margin-top: 10px;
        border: 1px solid rgb(49, 96, 202);
        border-radius: 4px;
        padding: 30px;
        .items {
          width: 50px;
          &:not(:first-child) {
            margin-left: 20px;
          }
          > i {
            font-size: 30px;
            position: relative;
            left: 10px;
          }
          > p {
            font-size: 12px;
            text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            /* autoprefixer:off */
            -webkit-box-orient: vertical;
            /* autoprefixer:on */
          }
        }
      }
    }
    .closebtn {
      background: rgb(49, 96, 202);
      border: 0;
      color: #ffffff;
      padding: 5px 20px;
      border-radius: 4px;
      display: block;
      margin: 0 auto;
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
